import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:oktoast/oktoast.dart';
import 'package:yysk_app/business/my_collection_list_Item_widget.dart';
import 'package:yysk_app/pages/nft_pages/home_pages/bulk_sales_and_cancellation_of_sales/bulk_sales_and_cancellation_of_sales_page.dart';
import 'package:yysk_app/pages/nft_pages/home_pages/my_collection_list/my_collection_list_controller.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/custom_app_bar2.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';
import 'package:yysk_app/widget/lazy_network_image.dart';

class MyCollectionListPage extends GetView<MyCollectionListController>
    implements PreferredSizeWidget {
  static const String path = '/MyCollectionListPage';
  const MyCollectionListPage({super.key});
  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return Scaffold(
        bottomNavigationBar:
            controller.headDetail.value?.collectionEquity == 'INCUBATION'
                ? Container(
                  width: context.width,
                  height: 37.px,
                  margin: EdgeInsets.only(top: 10.px, bottom: 30.px),
                  child: Center(
                    child: GestureDetector(
                      onTap: () {
                        // showToast('批量管理跳转');
                        if (controller.myCollectionList.isEmpty) {
                          showToast('暂无藏品');
                          return;
                        }
                        showSheet();
                      },
                      child: Container(
                        width: 125.px,
                        height: 37.px,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          color: Color.fromRGBO(59, 62, 69, 1),
                        ),
                        child: Center(
                          child: Text(
                            '批量管理',
                            style: TextStyle(
                              color: AppColors.backgroundColor,
                              fontSize: 14.px,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                )
                : Text(''),
        body: SafeArea(
          top: false,
          child: Stack(
            children: [
              Positioned(
                top: 0,
                left: 0,
                right: 0,
                child: ImageAssetWidget(
                  width: 375.px,
                  height: 812.px,
                  imageUrl: 'static/images/bg.png',
                ),
              ),
              Obx(() {
                var detail = controller.headDetail.value;
                double top = MediaQuery.of(context).padding.top;
                return RefreshIndicator(
                  onRefresh: _handleRefresh,
                  child: Stack(
                    children: [
                      Container(
                        padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                        child: Stack(
                          children: [
                            Column(
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(
                                    top: top,
                                    left: 11.px,
                                  ),
                                  child: CustomAppBar2(
                                    title: '',
                                    context: context,
                                    backgroundColor: AppColors.fontColor,
                                  ),
                                ),
                                Expanded(
                                  child: CustomScrollView(
                                    controller: controller.scrollController,
                                    slivers: [
                                      SliverToBoxAdapter(
                                        child: Container(
                                          padding: EdgeInsets.only(
                                            bottom: 20.px,
                                          ),
                                          width: context.width,
                                          decoration: BoxDecoration(
                                            // color: AppColors.fontColorRed
                                          ),
                                          child: SizedBox(
                                            width: 375.px,
                                            // margin: EdgeInsets.only(
                                            //   top: top + preferredSize.height,
                                            // ),
                                            child: Stack(
                                              children: [
                                                _header(
                                                  top: 20.px,
                                                  left: 24.px,
                                                  controller: controller,
                                                ),
                                                Column(
                                                  children: [
                                                    Container(
                                                      padding: EdgeInsets.only(
                                                        left: 100.px,
                                                      ),
                                                      width: context.width,
                                                      height: 98.px,
                                                      child: Column(
                                                        mainAxisAlignment:
                                                            MainAxisAlignment
                                                                .center,
                                                        crossAxisAlignment:
                                                            CrossAxisAlignment
                                                                .start,
                                                        children: [
                                                          Text(
                                                            detail?.collectionName ??
                                                                '',
                                                            textAlign:
                                                                TextAlign.left,
                                                            style: TextStyle(
                                                              fontSize: 20.px,
                                                              color:
                                                                  AppColors
                                                                      .fontColor,
                                                              overflow:
                                                                  TextOverflow
                                                                      .ellipsis,
                                                            ),
                                                          ),
                                                          SizedBox(
                                                            height: 10.px,
                                                          ),
                                                          Row(
                                                            children: [
                                                              Text(
                                                                '持有量 ',
                                                                textAlign:
                                                                    TextAlign
                                                                        .left,
                                                                style: TextStyle(
                                                                  fontSize:
                                                                      12.px,
                                                                  color:
                                                                      AppColors
                                                                          .backgroundColorGrey,
                                                                  overflow:
                                                                      TextOverflow
                                                                          .ellipsis,
                                                                ),
                                                              ),
                                                              Text(
                                                                ' ${detail?.productCount ?? ''}',
                                                                textAlign:
                                                                    TextAlign
                                                                        .left,
                                                                style: TextStyle(
                                                                  fontSize:
                                                                      12.px,
                                                                  color:
                                                                      AppColors
                                                                          .fontColor,
                                                                  overflow:
                                                                      TextOverflow
                                                                          .ellipsis,
                                                                ),
                                                              ),
                                                              Text(
                                                                ' | ',
                                                                textAlign:
                                                                    TextAlign
                                                                        .left,
                                                                style: TextStyle(
                                                                  fontSize:
                                                                      12.px,
                                                                  color:
                                                                      AppColors
                                                                          .backgroundColorGrey,
                                                                  overflow:
                                                                      TextOverflow
                                                                          .ellipsis,
                                                                ),
                                                              ),
                                                              Text(
                                                                '  发行方 ',
                                                                textAlign:
                                                                    TextAlign
                                                                        .left,
                                                                style: TextStyle(
                                                                  fontSize:
                                                                      12.px,
                                                                  color:
                                                                      AppColors
                                                                          .backgroundColorGrey,
                                                                  overflow:
                                                                      TextOverflow
                                                                          .ellipsis,
                                                                ),
                                                              ),
                                                              Text(
                                                                ' ${detail?.daoName ?? ''}',
                                                                textAlign:
                                                                    TextAlign
                                                                        .left,
                                                                style: TextStyle(
                                                                  fontSize:
                                                                      12.px,
                                                                  color:
                                                                      AppColors
                                                                          .fontColor,
                                                                  overflow:
                                                                      TextOverflow
                                                                          .ellipsis,
                                                                ),
                                                              ),
                                                            ],
                                                          ),
                                                        ],
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ),
                                      SliverPadding(
                                        padding: EdgeInsets.fromLTRB(
                                          12.px,
                                          0.px,
                                          12.px,
                                          20.px,
                                        ),
                                        sliver: SliverGrid(
                                          gridDelegate:
                                              SliverGridDelegateWithFixedCrossAxisCount(
                                                crossAxisCount: 2,
                                                crossAxisSpacing: 12.px,
                                                mainAxisSpacing: 12.px,
                                                childAspectRatio: 170 / 241,
                                              ),
                                          delegate: SliverChildBuilderDelegate(
                                            childCount:
                                                controller
                                                    .myCollectionList
                                                    .length,
                                            (BuildContext context, int index) {
                                              return LayoutBuilder(
                                                builder: (
                                                  BuildContext context,
                                                  BoxConstraints constraints,
                                                ) {
                                                  return MyCollectionListItemWidget(
                                                    item:
                                                        controller
                                                            .myCollectionList[index],
                                                    index: index,
                                                  );
                                                },
                                              );
                                            },
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              }),
            ],
          ),
        ),
      );
    });
  }

  Future<void> _handleRefresh() async {
    controller.getCollectionListByCollectionId();
    controller.getCollectionListByCollectionIdHead();
    return;
  }

  _header({
    double top = 120,
    double left = 11,
    required MyCollectionListController controller,
  }) {
    var detail = controller.headDetail.value;
    return Positioned(
      top: top.px,
      left: left.px,
      child: Stack(
        children: [
          Container(
            width: 62.px,
            height: 62.px,
            decoration: BoxDecoration(
              border: Border.all(width: 1.px, color: AppColors.backgroundColor),
              borderRadius: BorderRadius.circular(100),
            ),
            child: Center(
              child: LazyImage(
                imageUrl: '${detail?.coverImageUrl}',
                width: 62.px,
                height: 62.px,
                borderRadius: 100,
              ),
            ),
          ),
        ],
      ),
    );
  }

  //弹窗
  Future<void> showSheet() async {
    showModalBottomSheet(
      context: Get.context!,
      isDismissible: false,
      isScrollControlled: true,

      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        return BottomSheet(
          onClosing: () {},
          enableDrag: false, // 禁止拖拽，否则报错
          backgroundColor: Colors.transparent,
          builder: (BuildContext context) {
            return Container(
              padding: EdgeInsets.fromLTRB(
                0,
                0,
                0,
                MediaQuery.of(context).viewInsets.bottom,
              ),

              height: 200.px,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(color: Colors.transparent),
              // clipBehavior: Clip.antiAlias,
              child: Stack(
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.of(context).pop();
                          Get.toNamed(
                            '${BulkSalesAndCancellationOfSalesPage.path}?type=1&id=${controller.collectionId}',
                            arguments: {
                              'type': '1',
                              'id': '${controller.collectionId}',
                              'headName':
                                  '${controller.headDetail.value?.collectionName}',
                              'headUrl':
                                  controller.headDetail.value?.coverImageUrl ??
                                  '',
                              'headPrice':
                                  '${controller.headDetail.value?.totalPriceLimit}',
                              'serviceCharge':
                                  '${controller.headDetail.value?.serviceCharge}',
                            },
                          );
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            color: Color.fromRGBO(31, 33, 38, 1),
                          ),
                          height: 53.px,
                          child: Center(
                            child: Text(
                              '批量出售',
                              style: TextStyle(
                                color: AppColors.backgroundColor,
                                fontSize: 14.px,
                              ),
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          Navigator.of(context).pop();
                          Get.toNamed(
                            '${BulkSalesAndCancellationOfSalesPage.path}?type=0&id=${controller.collectionId}',
                            arguments: {
                              'type': '0',
                              'id': '${controller.collectionId}',
                              'headName':
                                  '${controller.headDetail.value?.collectionName}',
                              'headUrl':
                                  '${controller.headDetail.value?.coverImageUrl}',
                              'headPrice':
                                  '${controller.headDetail.value?.totalPriceLimit}',
                            },
                          );
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            color: Color.fromRGBO(31, 33, 38, 1),
                          ),
                          height: 53.px,
                          child: Center(
                            child: Text(
                              '批量取消出售',
                              style: TextStyle(
                                color: AppColors.backgroundColor,
                                fontSize: 14.px,
                              ),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 12.px),
                      Expanded(
                        child: GestureDetector(
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                          child: Container(
                            decoration: BoxDecoration(
                              color: Color.fromRGBO(31, 33, 38, 1),
                            ),
                            height: 53.px,
                            child: Center(
                              child: Text(
                                '取消',
                                style: TextStyle(
                                  color: AppColors.backgroundColorGrey,
                                  fontSize: 14.px,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }
}
